<script setup lang="ts">
import { ref } from "vue";
import { xiaoQiangStaticParkEntryConfig } from "./utils/hook";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { usePublicHooks } from "../../../../hooks";
import Refresh from "@iconify-icons/ep/refresh";
import Card from "./components/Card.vue";

defineOptions({
  name: "parkingRecordXiaoQiangStatisticsEntry"
});

const formRef = ref();
const { timeFrame } = usePublicHooks();

const {
  form,
  loading,
  onSearch,
  resetForm,
  dataList,
  pagination,
  onPageSizeChange,
  onCurrentChange
} = xiaoQiangStaticParkEntryConfig();
</script>

<template>
  <div>
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] mb-3"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
    >
      <el-form-item label="入场时间" prop="in_time" class="!w-[40%]">
        <el-date-picker
          v-model="form.in_time"
          type="datetimerange"
          :shortcuts="timeFrame"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期时间"
          end-placeholder="结束日期时间"
          :popper-options="{
            placement: 'bottom-start'
          }"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <div element-loading-svg-view-box="-10, -10, 50, 50">
      <template v-if="pagination.total > 0">
        <el-row :gutter="16">
          <el-col
            v-for="(data, index) in dataList.slice(
              pagination.pageSize * (pagination.current - 1),
              pagination.pageSize * pagination.current
            )"
            :key="index"
            :xs="8"
            :sm="4"
            :md="6"
            :lg="4"
            :xl="1"
          >
            <Card :product="data" />
          </el-col>
        </el-row>
        <el-pagination
          v-model:currentPage="pagination.current"
          class="float-right"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[30, 60, 90]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
      </template>
    </div>
  </div>
</template>
